/*----------------------------------------*\
  MENU
\*----------------------------------------*/

.menu {
  @apply list-none;

  a,
  a:hover {
    @apply no-underline text-inherit; /* override general styling for links in main */
  }
}

.menu__item {
  @apply flex items-center justify-between;
  @apply px-4 py-3 relative;
  @apply cursor-pointer;
  @apply transition-colors;

  @apply hover:bg-secondary-50;
  @apply focus:text-primary-600;
}

.menu__item--small {
  @apply text-sm 3xl:text-base;
}

.menu__item--action-btn {
  @apply px-4 py-3;
  @apply lg:text-xs 3xl:text-sm;
  @apply text-text-500 focus:text-text-500;
}

.menu__item--mini {
  @apply px-4 py-2;
}

.menu__item--border {
  @apply border-b border-opacity-100 border-secondary-100;
}

.menu__item--grey {
  @apply bg-secondary-50;
}

.menu__item--negative {
  @apply bg-secondary-600;
  @apply text-white;
  @apply border-b border-secondary-400;
}

.menu__item.menu__item--negative:hover {
  @apply bg-secondary-700;
}

.menu__item--negative:focus {
  @apply text-primary-300;
}

.menu__item--brim {
  @apply px-2;
}

.icon.menu__item__icon {
  @apply h-6 md:h-7;
}

.menu__item--title {
  @apply lg:px-0 hover:bg-white;
  @apply cursor-default;
}

/* NON RESPONSIVE UTILITIES */

.menu__item--active::after {
  content: '';
  @apply block bg-primary-500;
  @apply w-[3px];
  @apply absolute top-0 bottom-0 left-0;

  /* Sticky Nav: hide the active marker for mobile layout when navigation is in a aside sticky container */
  .container__aside .sticky & {
    @apply hidden md:block;
  }
}

.menu__item--condensed {
  @apply px-3 py-3;
}

.menu__item--condensed .icon {
  @apply lg:h-6 lg:w-6;
}

.menu__item--icon-on-hover {
  & .menu__item__icon {
    @apply opacity-0 transition-opacity duration-200;
  }

  &:hover .menu__item__icon {
    @apply opacity-100;
  }
}

.menu__item__flex {
  @apply flex w-full items-center justify-between space-x-2;
}

.menu__action-btn {
  @apply flex items-center justify-between;
  @apply px-4 py-3 relative;
  @apply text-sm 3xl:text-base;
  @apply border-0 border-opacity-0;
  @apply cursor-pointer;
  @apply transition-colors;
  @apply text-text-500;
}

.menu__action-btn:hover {
  @apply bg-secondary-50;
  @apply text-text-600;
}
